iT邦幫忙

2026 iThome 鐵人賽

DAY 1
0
Vibe Coding

忍三十天不要罵我的麻瓜隊友_從零基礎開始建立程式開發心法系列 第 3

Day 3 - 我的美術從來沒及格過: UI設計與主題規劃

  • 分享至 

  • xImage
  •  

想了兩周的設計圖塗鴉,一個下午成為事實

後來我很長一段時間都在忙專案,沒有來得及理Bruce,設計程式這件事情再度進入我的視野,是在兩個禮拜之後。

那天我們一個朋友S想要學Notion,盧我開課,但是因為S是透過Bruse跟我認識的,所以Bruce也被我們硬拉過去,我就夾在兩個大男生中間操作電腦,坐在酒吧的吧檯邊講了半個下午的Notion。

直到我快講完了才發現Bruce在玩小畫家...我真的沒在客氣當場就是一掌給他後腦勺八下去。

我:「你現在是把我當塑膠就對了?」
Bruce:「我在畫阿福要的設計圖啦!」

我跟S湊過頭去看,發現他用滑鼠拖著鉛筆一筆一筆的在試圖畫類似手機的操作畫面。
只有線框、按鈕位置、字。
連輪廓都只有用黑色筆刷畫。
...一個大學有畢業的...算了他不是美術系放過他吧。

只是那個畫技,我看完嚇得連忙再跟酒保點了一杯酒。

整個Vibe Coding最有機會Vibe的可能是外觀。

我:「你有沒有想過請阿福來幫你畫畫。」
Bruce:(哭喪著臉)「我有想過啊...我沒想到阿福竟然會拒絕我,他說他不是ChatGPT,頂多負責出程式碼給我...」

我向Bruce把圖要了過來,在S面前臨時加課:如何快速使用當時剛出兩天的 Claude Design。

「Bruce,你有想過要用甚麼顏色嗎?」我一邊問一邊開啟網頁登入Claude進入Design服務。

沒有。

「Bruce,你有想過這些按鈕他們有要甚麼風格嗎?圓角鈍角?外框有顏色沒顏色?」我把圖傳進Claude Design。

沒有。

「Bruce,你在畫這些塗...圖片的時候,腦袋裡面有甚麼樣的畫面嗎?」我把游標放到聊天室開始想prompt。

沒有,阿福說要操作畫面的樣子所以才畫的。

...我抬手又跟酒保點了一杯B52。

「你再給我說一個沒有,你就一口一杯B52,我出。」小小的shot杯被頓在他面前。

喝了一口琴湯尼,我開始思考問題應該是不能這樣問。

我:「Bruse,你平常喜歡甚麼顏色甚麼牌子?吃的穿的用的都行。」

眾人:「啊?」

...好吧,有時候都忘了自己就是他室友,他愛吃愛穿甚麼看久了都記起來了。

我在Claude Design裡面輸入以下Prompt。

請揉合{品牌A}、{品牌B}、{品牌C}的品牌形象色、Logo配色與美術風格,再配合上傳的圖片,以前述風格生成手機程式操作畫面的樣張、相應的色票列表並標示色碼,再另行生成負片色版本。

就這句。

然後Claude Design就輸出了幾份可模擬操作的樣張跟色票打樣。

Bruce跟S的嘴張成O形。

「Lorelei我該怎麼感謝...」我抬手制止他繼續說話。

「B52。」我指向杯子並看著他。

「喝掉。」

--

應該算是有介紹技術...嗎...我也不知道?


上一篇
Day 2 - 夢開始的試算表: 程式的根本是邏輯與計算
系列文
忍三十天不要罵我的麻瓜隊友_從零基礎開始建立程式開發心法3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言